<template>
	<div class="app-container">
		<div id="baseCountRange" style="width: 100%;height: 250%;"></div>
	</div>
</template>

<script>
	import {
		baseCount
	} from '@/api/dataview'
	
	import * as echarts from 'echarts'

	export default {
		name: 'HelloWorld',
		data() {
			return {
				options:{
					title: {
						text: '基础档案'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {},
					grid: {
						left: '2%',
						right: '2%',
						bottom: '2%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: ['标准', '货品', '员工']
					},
					series: [{
						name: '数量',
						type: 'bar',
						data: [555, 120, 666],
						barWidth: 20,
						itemStyle: {
							normal: {
								color: '#6485CA',
								barBorderRadius: [5, 5, 5, 5],
								label: {
									show: true, //开启显示
									position: 'right', //在上方显示
									textStyle: { //数值样式
										color: '#aaa',
										fontSize: 14
									}
								}
							}
						}
					}]
				}
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				
				baseCount().then(res => {
					var myChart = echarts.init(document.getElementById('baseCountRange'));
					this.options.yAxis.data = res.titels
					this.options.series[0].data = res.vals
					myChart.setOption(this.options);
				})
			}
		}
	}
</script>

<style>

</style>
